<template>
  <section class="next">
    <div v-if="!isLoading" :class="isNextActive?'active':''" @click="next">
      下一步
    </div>
    <div v-else>
      <mt-spinner type="triple-bounce" color="#26a2ff"></mt-spinner>
    </div>
  </section>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: "next",
    computed: {
      ...mapState([
        'isLoading'
      ])
    },
    methods: {
      next(){
        this.$emit('next');
      }
    },
    props: ['isNextActive'],
  }
</script>

<style scoped>
  .next .active {
    color: #00aaff;
  }

  .next > div {
    margin: 0 auto;
    width: 2rem;
    border: none;
    text-align: center;
    font-size: 0.18rem;
    color: #bbbbbb;
  }

</style>
